<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改点位信息</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow">
				<view class="qh-pic cu-avatar xl" :style="'background-image:url('+logo+')'"></view>
				<view class="qh-title text-bold text-blue text-xl">
					<text>更新点位信息</text>
				</view>
				<view class="cu-list menu">

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="text-black">扫描二维码</text>
						</view>
						<view class="action">
							<view :class="isScan==true?'bg-green':'bg-red'" class="cu-tag round light">{{isScan==true?'已扫':'未扫'}}</view>
						</view>
					</view>
					
					
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="text-black">获取当前位置</text>
						</view>
						<view class="action">
							<view :class="isArea==true?'bg-green':'bg-red'" class="cu-tag round light">{{isArea==true?'已读':'未读'}}</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 加入按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button @click="qrcodeClick" class="cu-btn bg-blue margin-top-sm lg" style="width: 46%;">扫描二维码</button>
				<button @click="getLocation1" class="cu-btn bg-red margin-top-sm lg" style="width: 46%;">获取位置</button>
			</view>

			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view style="margin-left: 0rpx;" class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">基本信息</text>
							<text class="text-ABC text-blue">BASE</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">点位名称:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input"  placeholder="点位名称" v-model="QrcodeEntity.qrcode_title" />
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">编号:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" type="number" v-model="QrcodeEntity.qrcode_sort"  placeholder="点位编号" />
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>描述信息:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input"  placeholder="描述信息" v-model="QrcodeEntity.qrcode_des" />
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>电子围栏:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" type="number" placeholder="电子围栏半径" v-model="QrcodeEntity.qrcode_distance" />
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>扫码后跳转:</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex:1;" class="action">
							<radio-group @change="goWhereChange" name="radio">
								<label style="margin-right: 20rpx;">
									<radio style="margin-right: 16rpx;" value="1" :checked="QrcodeEntity.goWhere==1"  /><text>添加工单</text>
								</label>
								<label style="margin-right: 20rpx;">
									<radio style="margin-right: 16rpx;" value="2" :checked="QrcodeEntity.goWhere==2" /><text>点位详情</text>
								</label>
								<label style="margin-right: 20rpx;">
									<radio style="margin-right: 16rpx;" value="3" :checked="QrcodeEntity.goWhere==3" /><text>设备详情</text>
								</label>
							</radio-group>
						</view>
					</view>

				</view>
			</view>
			
			<view v-if="false" class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view style="margin-left: 0rpx;" class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">设备相关</text>
							<text class="text-ABC text-blue">DEVICE</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">位号:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" placeholder="设备位号" />
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">车间:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" placeholder="所属车间" />
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">工段:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" placeholder="工段" />
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">类别:</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" placeholder="类别" />
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;">
				
			</view>
			<view class="publish-goods-wrap">
				<view class="publish-goods-btn" @click="UpdateQrcode">更新</view>
			</view>
			
			<!-- <view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button @click="RefreshData" class="cu-btn bg-red margin-top-sm lg" style="width: 100%;">清空数据</button>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import QQMapWX from "@/common/qqmap-wx-jssdk";
	export default {
		data() {
			return {
				logo:this.$request22.baseUrl1+'/Resource/sg/logo.png',
				isScan:false,
				scanData:'',
				isArea:false,
				Address:'',
				Longitude:'',
				Latitude:'',
				params:{
					qrcodeId:'',
					Longitude:'',
					Latitude:'',
					qrcode_title:'',
					qrcode_sort:0,
					qrcode_des:'',
					qrcode_distance:0,
					goWhere:1,
				},
				QrcodeEntity:{
					qrcode_title:'',
					qrcode_sort:'',
					qrcode_des:'',
					qrcode_distance:'',
					goWhere:1
				}
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		onReachBottom() {

		},
		methods: {
			goWhereChange(event){
				 this.QrcodeEntity.goWhere = event.detail.value;
			},
			RefreshData(){
				let that=this
				that.isScan=false
				that.scanData=''
				that.isArea=false
				that.Address=''
			},
			UpdateQrcode(){
				var that = this;
				if(that.scanData==null||that.scanData==''){
					uni.showToast({ title: '请扫码', icon: 'error', duration: 3000 });
					return;
				}
				// if(that.Longitude==null||that.Longitude==''){
				// 	uni.showToast({ title: '请获取位置', icon: 'none', duration: 2000 });
				// 	return;
				// }
				uni.showLoading({
					title: '更新中'
				})
				let opts = {
					url: 'api/UpdateQrcode',
					method: 'post'
				};
				
				that.params.qrcodeId=that.scanData;
				that.params.Longitude=that.Longitude;
				that.params.Latitude=that.Latitude;
				that.params.qrcode_title=that.QrcodeEntity.qrcode_title;
				that.params.qrcode_sort=that.QrcodeEntity.qrcode_sort;
				that.params.qrcode_des=that.QrcodeEntity.qrcode_des;
				that.params.qrcode_distance=that.QrcodeEntity.qrcode_distance;
				that.params.goWhere=that.QrcodeEntity.goWhere;
				request.httpTokenRequest(opts,that.params).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '更新成功', icon: 'success', duration: 3000 });
						that.isScan=false
						that.scanData=''
						that.isArea=false
						that.Address=''
						that.Longitude=''
						that.Latitude=''
						that.QrcodeEntity.qrcode_title=''
						that.QrcodeEntity.qrcode_sort=''
						that.QrcodeEntity.qrcode_des=''
						that.QrcodeEntity.qrcode_distance=''
						that.QrcodeEntity.goWhere=''
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'error', duration: 5000 });
					}
				});
			},
			qrcodeClick() {
				uni.showLoading({
					title: '提交中'
				})
				let that = this;
				that.isScan=false
				that.scanData=''
				 
				 // 只允许通过相机扫码
				 uni.scanCode({
					 onlyFromCamera: true,
					 success: function(res) {
						uni.hideLoading();
						that.result2 = res.result;
						let qrcodeId=request.getRequest(res.result,'id')
						 
						that.isScan=true
						that.scanData=qrcodeId
						
						uni.showLoading({
							title: '加载中...'
						})
						let opts = {
							url: 'api/GetQrcodeEntityById',
							method: 'get'
						};
						let params1={
							id:qrcodeId
						}
						request.httpTokenRequest(opts,params1).then(res => {
							uni.hideLoading();
							if(res.data.code == 1){
								that.QrcodeEntity=res.data.data
							}
							else{
								uni.showToast({ title: res.data.msg, icon: 'none', duration: 5000 });
							}
						});
						 
						 
					 },fail() {
					 	uni.hideLoading();
					 }
				 });
			},
			getLocation1(){
				let that=this
				that.isArea=false
				that.Address=''
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.Longitude=res.longitude
						that.Latitude=res.latitude
						that.isArea=true
					},complete(res) {
						console.log(res)
					}
				})
			},
			qrcodeAreaClick(){
				let that=this
				//获取位置信息
				
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					//altitude: true,
					success(resLocation) {
						console.log('resLocation'+ JSON.stringify(resLocation) )
						that.Longitude=resLocation.longitude;
						that.Latitude=resLocation.latitude;
					},fail() {
						uni.showToast({ title: '请重试（获取位置信息失败）', icon: 'none' });
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
</style>
